<template>
    <div class="box">
        <cvue-dialog
            :dialogVisible="dialogVisible"
            title="查看详情"
            :isShowFoot="true"
            @handleOpen="openDialog"
            @exportDialog="exportDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div class="dialogBody" slot="dialogBody">
                <div>
                   <div class="oneRow">
                       <span>
                           任务编号：
                           {{taskDetail.taskCode}}
                       </span>
                        <span>
                           任务进度： 
                           {{taskDetail.taskProgress}}%
                       </span>
                   </div>
                   <div class="oneRow">
                       <span>
                           设备编号：
                           {{taskDetail.deviceSerialNum}}
                       </span>
                       <span>
                           设备类型：
                           {{taskDetail.deviceTypeName}}
                       </span>
                   </div>
                   <!-- <div class="oneRow">
                       <span>
                           备注：
                           {{taskDetail.taskRemark}}
                       </span>
                       <span>
                           任务进度： 
                           {{taskDetail.taskProgress}}%
                       </span>
                   </div> -->
                </div>
                <div class="tablesize">
                    <div class="home-body" style="margin-top:15px">
                        <cvue-table
                        :option="tableOption"
                        :data="tableData"
                        ref="tbl1"
                        :isShowAdd="false"
                        :page="page"
                        :tablePage="tablePage"
                        :pageSize="page.pageSize"
                        :loading="tableLoading"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :isShowPage="true"
                        >
                            <template slot-scope="scope" slot="className">
                                <div>{{scope.row.gradeName}}{{scope.row.className}}</div>
                            </template>
                        </cvue-table>
                    </div>
                </div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>

import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialogOut'
import {mapState, mapGetters} from 'vuex'
export default {
    name: 'hehe',
    components: {
        cvueTable, cvueDialog
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        task: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    watch: {
        task (newVal, oldVal) {
            this.$parent.getTask()
        }
    },
    data () {
        return {
            taskDetail: '',
            tableLoading: false,
            tablePage: 1,
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
                pageSizes: [10, 20, 1000]
            },
            tableOption: {
                stripe: true,
                width: '100%',
                border: true,
                index: false,
                cloumn: [
                    {prop: 'busiPersonName', label: '学生姓名', align: 'center'},
                    {prop: 'dormitoryName', label: '楼号', align: 'center'},
                    {prop: 'roomName', label: '宿舍号', align: 'center'},
                    {prop: 'className', label: '所属班级', align: 'center', slotStatus: true},
                    {prop: 'importStatusDesc', label: '状态', align: 'center'}
                ]
            },
            tableData: [],
            xlsData: []
        }
    },
    methods: {
         // 改变pagesize
        handleSizeChange (val) {
            this.page.currentPage = 1
            this.page.pageSize = val
            this.personImportDeviceProgress()
        },
        // 改变页码
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.personImportDeviceProgress()
        },
        // 导出
        exportDialog () {
            if (this.xlsData.length == 0) {
                this.$message({
                    message: '没有导出数据',
                    type: 'error'
                })
                return
            }
            // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `姓名,楼号,宿舍号,班级,状态\n`
            // 增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < this.xlsData.length; i++) {
                for (let item in this.xlsData[i]) {
                    str += `${this.xlsData[i][item] + '\t'},`   
                }
                str += '\n'
            }
            // encodeURIComponent解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
            // 通过创建a标签实现
            let link = document.createElement('a')
            link.href = uri
            // 对下载的文件命名
            link.download = '导出学生名单.xls'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        },
        openDialog () {
            this.getDetail()
            this.page.currentPage = 1
            this.personImportDeviceProgress()
        },
        // 获取详情
        getDetail () {
            var params = {
                id: this.task.id
            }
            this.$store.dispatch('task/GetTaskDetail', params).then(
                res => {
                    this.taskDetail = res
                }
            )
        },
        // 获取人员进度表
        personImportDeviceProgress () {
            this.tableLoading = true
            var params = {
                vmsTaskSeriesId: this.task.vmsTaskSeriesId,
                // VmsTaskId: this.task.id,
                DeviceType: this.task.deviceType,
                Page: this.page.currentPage,
                limit: this.page.pageSize
            }
            this.$store.dispatch('task/PersonImportDeviceStatus', params).then(
                res => {
                    this.xlsData = []
                    this.tableData = res.list
                    this.page.total = res.total
                    this.tableData.forEach(
                        item => {
                            var obj = {busiPersonName: item.busiPersonName, lou: item.dormitoryName, suse: item.roomName, class: item.className + item.gradeName, importStatusDesc: item.importStatusDesc}
                            this.xlsData.push(obj)
                        }
                    )
                    this.tableLoading = false
                }
            ).catch(
                (res) => {
                    this.tableData = []
                    this.page.total = 0
                    this.tableLoading = false
                }
            )
        },
        closeDialog () {
            this.$emit('closeDialog')
        },
        confirmDialog () {
            this.$emit('confirmDialog')
        }
    }
}
</script>
<style lang='less' scoped>
    .box{
        padding: 0px 50px!important;
    }
    .dialogBody{
        padding: 0 30px;
        .oneRow{
            margin-bottom: 16px;
            overflow: hidden;
            span:first-child{
                float: left;
            }
            span:last-child{
                float: right;
            }
        }
    }
    
</style>
